<template>
	<view class='coupon'>
		<view class="screenCondition dFlex jAround_aCenter">
			<view :class="['conditionOne',use_status == '1'?'actScreen':'']" @click="use_status = '1';initCoupon()">
				<text>可使用优惠券</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view> 
			<view :class="['conditionOne',use_status == '2'?'actScreen':'']" @click="use_status = '2';initCoupon()">
				<text>不可使用优惠券</text>
				<view class="bottomLine imgPublic">
					<image src="../static/images/xhx@3x.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="list" v-if='cpList.length'>
			<view class="couponOne dFlex jStart_aCenter" v-for="(item,index) in list" :key='item.id' @click="chooseCp(item)">
				<view class='cpIcon imgPublic'>
					<image src='/static/images/yhq@2x.png' mode="widthFix"></image>
					<!-- <image src='/static/images/hb@2x.png' mode="widthFix"></image> -->
				</view>
				<view class="cpContent dFlex jBetween_aCenter">
					<view class="condition"> 
						<view class="name">{{item.title}}</view>
						<view class='orderAmount' v-show='item.type == "4"'>折扣券,满{{item.min_price}}即可使用</view>
						<view class='orderAmount' v-show='item.type == "1"'>满{{item.min_price}}即可使用</view>
						<view class='orderAmount' v-show='item.type == "0"'>无门槛券，满{{item.min_price}}即可使用</view>
						<view class='time'>有效期：{{item.start_time_text.split(' ')[0]}} ~ {{item.end_time_text.split(' ')[0]}}</view>
					</view>
					<view class='amount'>
						<view class='price' v-if='item.type <= "1"'>￥<text>{{item.sub_price}}</text></view>
						<view class='price' v-if='item.type == "4"'><text>{{item.discount}}</text>折</view>
						<!-- <view class='desc'>无使用门槛</view> -->
						<!-- <view class="useBtn">领取</view> -->
					</view>
				</view>
			</view>
		</view>
		<u-empty mode="list" v-else icon="http://cdn.uviewui.com/uview/empty/car.png" text='暂无数据'></u-empty>
	</view>
</template>

<script>
	import {
		getUseCoupon
	} from '@/tools/http.js';
	export default {
		data() {
			return {
				cpList:[],
				list:[],
				use_status:'1',//1可用 2不可用
				orderPrice:'',
			};
		},
		onLoad(e){
			this.orderPrice = e.orderPrice;
			this.initCoupon();
		},
		methods:{
			// 优惠券列表
			async initCoupon(){
				this.cpList = [];
				let res = await getUseCoupon({
					source:0,
				});
				console.log(res);
				if(res){
					this.cpList = res;
					this.operateUse();
				}
			},
			// 处理可用和不可用 0无门槛 1满减 4折扣券
			operateUse(){
				this.list = [];
				this.cpList.forEach((item)=>{
					if(this.use_status == '1'){ //可用
						if(item.type == '0'){
							this.list.push(item);
						}
						if((item.type == '1' || item.type == '4') && parseFloat(this.orderPrice) > parseFloat(item.min_price)){
							this.list.push(item);
						}
					}else{//不可用
						if(item.type == '1' || item.type == '4'){
							if(parseFloat(item.min_price) > parseFloat(this.orderPrice)){
								this.list.push(item); 
							}
						}
					}
				})
			},
			// 选择优惠券
			chooseCp(line){ 
				if(line.type == '1'){
					if(this.orderPrice < line.min_price){
						uni.showToast({
							title:'订单商品金额不满足该优惠券',
							icon:"none"
						})
						return;
					}
				}
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];// 上级页面实例
				prevPage.$vm.coupon = line;
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.coupon{
		width:100%;
		padding:12px 2.6%;
		box-sizing:border-box;
		.list{
			width:100%;
			margin-top:12px;
			.couponOne{
				width:100%;
				margin-bottom:12px;
				background:white;
				border-radius:5px;
				padding:10px;
				box-sizing: border-box;
				.cpContent{
					flex:1;
					.condition{
						flex:1;
						.time{
							width:100%;
							font-size:10px;
							color:#808080;
						}
						.orderAmount{
							font-size:12px;
							color:#808080;
							margin:6px 0 15px;
						}
						.name{
							font-weight:bold;
						}
					}
					.amount{
						width:max-content;
						text-align:center;
						.useBtn{
							width:max-content;
							font-size:12px;
							color:white;
							border-radius:50px;
							background:linear-gradient(to right, #3E8EF0 0%, #1362C9 100%);
							padding:4px 16px;
						}
						.desc{
							font-size:10px;
							color:#808080;
							margin:4px 0 8px;
						}
						.price{
							font-size:12px;
							color:#FF0000;
							text{
								font-size:20px;
								font-weight:bold;
							}
						}
					}
				}
				.cpIcon{
					width:142rpx;
					height:142rpx;
					margin-right:10px;
				}
			}
		}
		.screenCondition {
			padding:0 0 6px;
		}
	}
</style>